<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
    .dropdown-menu{
        z-index: 9999;
    }
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="#">首页</a>
            </li>
            <li class="active">
                客户信息管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-12 div-table">
                <div id="custom-toolbar" class="col-sm-12 custom-toolbar">
                    <div class="form-inline" role="form">
                        <!--<button id="btn-DataDetail" type="button" role="button" class="subFun btn btn-sm btn-Data btn-info disabled">
                            <span class="glyphicon glyphicon-th-list"></span> 详情
                        </button>-->
                        <span style="display: inline-block;margin-top: 8px;color: #777;">满足条件的数据有<span id="count"></span>条，最多显示前5000条</span>
                        <button id="btn-Filter" type="button" href="#modal-Filter" role="button" data-toggle="modal" class="btn btn-sm btn-primary pull-right" title="请选择数据">
                            <span class="glyphicon glyphicon-th-list"></span> 筛选
                        </button>
                    </div>
                </div>
                <table id="table" class="table table-hover table-condensed"
                       data-click-to-select="true"  data-single-select="true" data-height="410">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true" ></th>
                        <th data-field="UpdateTime" data-halign="center" data-align="center" data-width="150">升级时间</th>
                        <th data-field="TermId" data-halign="center" data-align="center" data-width="120">设备编号</th>
                        <th data-field="TermVersion" data-halign="center" data-align="center" data-width="100">终端版本号</th>
                        <th data-field="NowVersion" data-halign="center" data-align="center" data-width="100">升级后版本号</th>
                        <th data-field="TermType" data-halign="center" data-align="center" data-width="120">终端类型</th>
                        <th data-field="HardType" data-halign="center" data-align="center" data-width="120">硬件类型</th>
                        <th data-field="RespCode" data-halign="center" data-align="center" data-width="100">返回码</th>
                        <th data-field="Result" data-halign="center" data-align="center" data-width="150">结果</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="col-sm-12 alert alert-success div-alert" id="events-result" data-es="Aquí se muestra el resultado del evento"></div>
        <!-- #遮罩层 --->
        <div class="modal fade" id="modal-Template" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1100px">
                <div class="modal-content" id="modal-content-tpls">
                    <!-- #从模板加载 --->
                </div>
            </div>
        </div>
        <!-- #筛选条件遮罩层 --->
        <div class="modal fade" id="modal-Filter" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <div class="modal-title" id="myModalLabel1">
                            筛选条件
                        </div>
                    </div>
                    <form id="queryForm" method="post" class="form-horizontal layer_msg">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">起始日期</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="DateStart" name="DateStart" placeholder="请输入起始日期"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">结束日期</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="DateEnd" name="DateEnd" placeholder="请输入结束日期"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">终端编号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="TermId" name="TermId" placeholder="终端编号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">终端版本号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="TermVersion" name="TermVersion" placeholder="终端版本号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">升级后版本号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="NowVersion" name="NowVersion" placeholder="升级后版本号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">返回码</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="RespCode" name="RespCode" placeholder="返回码"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">终端类型</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="TermType" name="TermType" placeholder="终端类型"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">硬件类型</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="HardType" name="HardType" placeholder="硬件类型"/>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="modal-btn-query" type="submit" class="btn btn-primary" data-dismiss="modal">查询</button> <button id="modal-btn-close1" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        OrgSelectInit();
        $('#DateStart,#DateEnd').datepicker({
            format:"yyyy.mm.dd"
        }).datepicker('setValue', new Date());

        $('#modal-Filter').modal('show');

        /*筛选框查询按钮点击事件注册_add_ywq_20140123-Start*/
        $("#modal-btn-query").click(function(){
	    $("#DateStart").val($("#DateStart").val().replace(/\./g,""));
            $("#DateEnd").val($("#DateEnd").val().replace(/\./g,""));
            if($("#DateStart")>$("#DateEnd"))
            {
                alert("结束日期必须大于起始日期");
            }
            $("#OrgId").val(localStorage.orgid);
            /*表格初始化_add_ywq_20140123-Start*/
            $('#table').bootstrapTable("destroy");
            $('#table').bootstrapTable({
                queryParams:function(params) {
                    var qp={
                        page:params.offset/params.limit+1,
                        rows:params.limit
                    };
                    return {};
                },
                url:globalUrl+'api/TMSUpdate?'+$("#queryForm").serialize(),
                //sidePagination: 'server',
                pagination:true,
                pageSize:10,
                search:false,
                responseHandler:function(data){
                    $("#count").text(data.data.count);
                    return data.data.rows;
                }
            })
                    .on('click-row.bs.table', function (e, row, $element) {
                        if ( $element.hasClass('selected') ) {
                            $element.removeClass('info');
                        }
                        else {
                            $element.parent('tbody').find(' > tr.selected ').removeClass("info");
                            $element.addClass('info');
                        }
                    })
                    .on('check.bs.table', function (e, row, $element) {
                        $(".btn-Data").removeClass("disabled");
                    })
                    .on('uncheck.bs.table', function (e, row, $element) {
                        $(".btn-Data").addClass("disabled");
                    });
            /*表格初始化_add_ywq_20140123-End*/
        });
        /*筛选框查询按钮点击事件注册_add_ywq_20140123-End*/


        /*详情按钮点击事件注册_add_ywq_20140123-Start*/
        $('.subFun ').on("click",function () {
            //计算按钮对应的模板文件名
            var fileName=$(this).attr("id").substr(8);
            //计算模板文件地址
            var url="../assets/tpls/CustomerInfo_"+fileName+".html";
            //异步获取模板数据并导入绑定数据
            getTpls(url,function(resp){
                $("#modal-content-tpls").html(resp);
                dataBindToModal($('#validForm'),$('#table'));
                $('#modal-Template').modal('show');
            });
        });
        /*详情按钮点击事件注册_add_ywq_20140123-End*/
    });
</script>